<template>
    <view >
		<view style="display: block;position: relative;height: 45px;background-color: white;">
			<div class="login-button2">
				    <image v-if="avatar"  :src="avatar" class="cu-avatar xl round" mode="widthFix"></image>
			    </div>
			<div class="login-button" >
				<view  @click="turnLogin" v-if="!avatar" >
					登录
				</view>
			</div>
			<div class="search-container" @click="gotoSearch()">
			    <icon class="searchcion" size='16' type='search'></icon>
			    <text type="text"  class="search"   >搜你想搜,想你所想</text>
			</div>
			<image class="email" @click="gotoMessage()" src="../static/images/tabbar/通知.png"></image>
			<image class="add" @click="gotoAdd()" src="../static/images/增加.png"></image>
	    </view>
		
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			    <swiper-item>
					<image class='rounded-image' src="../static/1.jpg">
			    </swiper-item>
			    <swiper-item>
					<image class='rounded-image' src="../static/2.jpg">
			    </swiper-item>
			    <swiper-item>
			        <image class='rounded-image' src="../static/3.jpg">
			    </swiper-item>
			</swiper>
        </view>
		<view style="height: 5px;background-color: #efeff0;"></view>
		<view class="container">
		  <view class="item" v-for="item in ArticleList"  @click="gotoArticle(item)">
			<!-- <image :src="item.thumbnail"></image> -->
			<u-lazy-load threshold="-100"  height="170" img-mode="aspectFill" border-radius="10" :image="item.thumbnail" class="img"></u-lazy-load>
		    <text class="title" >{{ item.title }}</text>
			<text class="author">{{ item.author}}</text>
		  </view>
		  <u-loadmore :status="status" />
		</view>	
    </view>
  </template>
  
  <script>
 import { listArticle } from '@/api/article.js'
 import storage from '@/utils/storage'
  import {
  	getInfo
  } from '@/api/login.js'
  export default {
    data() {
      return {
		avatar:"",
		status: 'loadmore',
        background: ['color1', 'color2', 'color3'],
        indicatorDots: true,
        autoplay: true,
        interval: 2000,
        duration: 500,
		selectedArticleId: null,
        ArticleList: [],
		List: [],
		queryParams: {
		        pageNum: 1,
		        pageSize: 6,
		        title: null,
		        created: null,
		        author: null,
		      },
		
		
      };
    },
	computed: {
	  // avatar() {
		  
	  // },
	  windowHeight() {
	    return uni.getSystemInfoSync().windowHeight - 50
	  }
	},
	
	created(){
		this.getRecommendData(this.queryParams);
		getInfo().then(res=>{
					  console.log(this.imageBasePath+res.user.avatar,"touxiang")
					  this.avatar =  this.imageBasePath+res.user.avatar
		})
	},
    mounted() {
 
    },
    methods: {		
	turnLogin(){
		wx.navigateTo({
		    url: '/pages/login',
		    success() {}
		});
	},
	gotoArticle(item){
		const selectedArticleId = item.id;
		uni.setStorageSync('selectedArticleId', selectedArticleId);
		wx.navigateTo({
			        url: '/pagesA/od/article/article?id=' + this.selectedArticleId,
				    success() {}
			    });
				},
	gotoSearch(){
		wx.navigateTo({
			        url: '/pages/test1/test1',
				    success() {}
			    });
	},
	gotoMessage(){
		wx.navigateTo({
			        url: '/pagesA/message/message',
				    success() {}
			    });
	},
	gotoAdd(){
		  wx.navigateTo({
		  	        url: '/pagesA/add/add',
		  		    success() {}
		  	    });
	},
    getRecommendData(queryParams) {
		listArticle(this.queryParams).then(res =>{
		console.log(res.rows)
		console.log('res.row')
		this.List = res.rows
	
		res.rows.forEach(item =>{
			item.thumbnail=this.imageBasePath+item.thumbnail;
			this.ArticleList.push(item)
		});
		//对图片访问的地址进行调整，配置出全路径
		// this.ArticleList.forEach(item =>{
		// item.thumbnail=this.imageBasePath+item.thumbnail;
		// });
		})
      },
	  onReachBottom() {
		console.log(this.List,"list")
		if(this.queryParams.pageSize > this.List.length)this.status = 'nomore';
		if(this.queryParams.pageSize > this.List.length)return 
		// if(this.queryParams.pageNum >= 2) return
		if(this.queryParams.pageSize > this.List.length){
			this.status = 'nomore';
		}
		else{	this.status = 'loading';}
	  	this.queryParams.pageNum = ++this.queryParams.pageNum
	  	setTimeout(() => {
	  		this.getRecommendData(this.queryParams)
			// if(this.queryParams.pageSize > this.List.length)this.status = 'nomore';
	  		if(this.queryParams.pageNum >= 26) this.status = 'nomore';
			
	  		// else this.status = 'loading';
	  	}, 100)
	  }
    }
  };
  
  </script>
  
<style lang="scss">
	$uni-success: #18bc37 !default;
	/* 文章推荐 */
	page{
		  background-color: #efeff0;
		}
	.author{
	 position: absolute;
		top: 70px;
		left: 5px;
		opacity: 0.5;

	}
	.title{
		width:200px;
		position: absolute;
		font-family: Arial, sans-serif;
		font-size: 14px;
		flex-wrap: wrap;
		top: 5px;
		left: 10px;
	  }
 
   .img{
	float: right;
    display: block;
	height:85px;
	width:120px;
	margin: 5px;
	border-radius: 8px;
	overflow: hidden;
  }
  .item {
  	background-color: white;
  	position: relative;
    height: 95px;
	width: 100%;
  	padding-bottom: 5px;
	margin-left:5px;
	margin-right:5px;
	margin-bottom:5px;
  	border-radius: 10px;
	overflow: hidden;
  }
  .container {
    display: flex;
	flex-wrap: wrap;
	height: 100%;
	width: 100%;
    flex-direction: row;
	 justify-content: center;
	 background-color: #efeff0;
  }
  /*轮播图部分*/
  .uni-margin-wrap {
	margin-top: 5px;
    width: 100%;
	height: 403rpx;
	background-color: #efeff0;
  }
  .swiper {
    height: 400rpx;
	margin: 5px;
	border-radius: 5px;
	overflow:hidden;
	transform: translateY(0);
  }
  .swiper-item {
   width: 100%;
    height: 100%;
  }
  .rounded-image {
      width: 100%;
      height: 100%;
      /* 根据需要调整圆角半径 */
  }


/*  搜索框 */
.search-container {
	position: absolute;
	top: 7px;
	left: 20%;  /* 将水平位置设置为50% */
	width: 60%;
	height: 30px;
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 20px;
  background-color: #efeff0;

}

.search-icon {
  margin-right: 8px;
}

.search {
  flex: 1;
  border: none;
  margin-left: 5px;
  background-color: transparent;
  text-align: center;
  font-size: 14px;
  color:  #b9b9b9;
}

/*圆形登录按钮*/
.login-button {
position: absolute;
top: 2px;
left: 4%;
  border-radius: 50%;
  width: 40px;
  height: 40px;
 border: 1px solid #ccc;
  display: flex;
  color: #acacac;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}
.login-button2 {
position: absolute;
top: 2px;
left: 4%;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
}
.location {
position: absolute;
top: 6px;
right: 40px;

}
.email {
position: absolute;
top: 7px;
right: 10%;
height: 32px;
width: 32px;
}
.add {
position: absolute;
top: 9px;
right: 2%;
height: 28px;
width: 28px;
}
	.mb-10 {
		margin-bottom: 10px;
	}

  .decoration{
    width: 6px;
    height: 6px;
		margin-right: 4px;
    border-radius: 50%;
		background-color: $uni-success;
  }
  
</style>
